<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
</head>
<script type="text/javascript">
function svrcomChg(){
    

    
    var svrcom =  document.getElementById("selEmlTail");

    if(svrcom.value == "")
    {
        document.getElementById("mbrEmlTail").disabled = false;
        document.getElementById("mbrEmlTail").focus();
    }
    else 
    {
        document.getElementById("mbrEmlTail").value = "";
        document.getElementById("mbrEmlTail").disabled = true;
        emlCheck();
    }


}


function emlCheck()
{
        
    var frm = $("#mbrEntForm")[0];
    var emlCheckMsg = document.getElementById("emlMsg");
    var emailChkFlg = document.getElementById("emailChkFlg");
    var emlMsgFlg = document.getElementById("emlMsgFlg");   
    var mbrEmlPrx = document.getElementById("mbrEmlPrx") ;
    var mbrEmlTail = document.getElementById("mbrEmlTail") ;
    var selEmlTail = document.getElementById("selEmlTail") ;

    //이메일 아이디를 입력하고 직접입력을 선택한후 이메일회사를 입력하거나 이메일회사를 선택한 경우에만
    //ID 중복을 체크한다.  
    if ((mbrEmlPrx.value !="") && ( ((selEmlTail.value == "" ) && (mbrEmlTail.value !=""))   || ((selEmlTail.value !="") && (mbrEmlTail.value ==""))))
    {

  
      //1. 직접입력의 경우 "."이 하나이상 존재하는지 파악한다.
      if((selEmlTail.value == "" ) && (mbrEmlTail.value !=""))
      {
          var ipos = mbrEmlTail.value.indexOf(".");

          if (ipos <= 0){
              emlCheckMsg.innerHTML="<font color=\"red\">유효하지 않은 이메일입니다.</font>";
              emailChkFlg.value = "";
              emlMsgFlg.value = "1"; 
              mbrEmlPrx.value="";
              mbrEmlTail.value="";
              selEmlTail.value="";
              mbrEmlPrx.focus();
              return false;
          }
              
      }
      //2. 중복검사를 위한 서비스를 호출한다.
        //var allEml = mbrEmlPrx.value + "@" + mbrEmlTail.value + selEmlTail.value ;
        var allEml =$("#mbrEmlPrx").val() + "@" + $("#mbrEmlTail").val() + $("#selEmlTail").val()  ;

      
       $.post("<c:url value='/mbr/emlCheck.do'/>",
               {
                   'aeml' : allEml
               },
               function(data){
                   var result={};
                   var items = $(data).find("item");
                   items.each(function(index,element){
                      var name = $(this).find("name").text();
                      var value = $(this).find("value").text();
                      result[name] = value;
                   });
                   if(result["result"] =="OK"){
                       emlCheckMsg.innerHTML="이메일 아이디가 확인되었습니다.";
                       emailChkFlg.value = "Y";
                   }
                   else{
                       emlCheckMsg.innerHTML="<font color=\"red\">유효하지 않거나 중복 이메일입니다.</font>";
                       emlMsgFlg.value = "1"; 
                       emailChkFlg.value = "";
                       mbrEmlPrx.value="";
                       mbrEmlTail.value="";
                       selEmlTail.value="";
                       selEmlTail.focus();
                       return false;                      
                   }
                       
               }  
           );  

       return true;      
    }
  
    
    return false;
}

function emlMsgCheck(){

    var emlMsgFlg = document.getElementById("emlMsgFlg");   

    var emlCheckMsg = document.getElementById("emlMsg");
    
    if(emlMsgFlg.value == "1"){

        emlCheckMsg.innerHTML="현대자동차 홈페이지에서 사용 가능한 이메일 아이디를 입력하여 주세요.";
        emlMsgFlg.value = "0";
    }
}




function pwdMsgCheck()
{
    var frm = $("#mbrEntForm")[0];


    
    var pwdCheckMsg = document.getElementById("pwMsg");
    
    var pwMsgFlg = frm.pwMsgFlg.value ;
    
    if (pwMsgFlg == "1")
        {
        pwdCheckMsg.innerHTML="6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)";
        frm.pwMsgFlg.value = "0";
        }   
   
}
function pwdCheck()
{     
    
    var frm = $("#mbrEntForm")[0];

    // alert($("#pw1").val());    
   var pwtxt = document.getElementById("pwtxt");

    var pwCfn = document.getElementById("pwCfn");
    
    
    var pwdCheckMsg = document.getElementById("pwMsg");
    
    var pwMsgFlg = document.getElementById("pwMsgFlg") ;
 
    if (pwMsgFlg.value == "1")
    {
//    pwdCheckMsg.innerHTML="<font color=\"black\">6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)</font>";
     pwdCheckMsg.innerHTML="6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)";
      pwMsgFlg.value = "0";
    }
    
    //비밀번호와 비밀번호 확인은 모두 입력하였을 경우에만 메세지 처리를 한다
    
    if((pwtxt.value != "" ) && (pwCfn.value != ""))
    {
 
       //1. 비밀번호와 비밀번호 확인 데이터가  일치하는지 체크한다.
       //   일치하지 않으면 모두 초기화하고 비밀번호로 포커스를 이동한다.

       if((pwtxt.length < 6) || (pwCfn.length < 6))
       {
            pwdCheckMsg.innerHTML="<font color=\"red\">잘못된 번호입니다.</font>";
            frm.pwMsgFlg.value = "1";
            pwtxt.value = "";
            pwCfn.value = "";
            pwtxt.focus();
            return false;       
        }
       
       if( pwtxt.value != pwCfn.value)
       {
           
           pwdCheckMsg.innerHTML="<font color=\"red\">비밀번호와 비밀번호확인값이 일치하지 않습니다.</font>";
           pwMsgFlg.value = "1";
           pwtxt.value = "";
           pwCfn.value = "";
           pwtxt.focus();
           return false;
       }
       else
       {  //2. 특수문자가 입력되었는지 체크한다.
           
            var regEx_pwd = new RegExp("[^a-zA-Z0-9]");
            var regEx_pwd_E = new RegExp("[a-zA-Z]");
            var regEx_pwd_N = new RegExp("[0-9]");
            //특수문자 입력여부 체크       
            var result_pwd = regEx_pwd.exec(pwtxt.value);
             if(result_pwd)
            {
                
                pwdCheckMsg.innerHTML="<font color=\"red\">잘못된 번호입니다.</font>";
                pwMsgFlg.value = "1";
                pwtxt.value = "";
                pwCfn.value = "";
                pwtxt.focus();
                return false;
            }
            
            //3.영어만 존재하는지 체크한다
            var result_pwd_E = regEx_pwd_E.exec(pwtxt.value);
            if(!result_pwd_E)
            {
                pwdCheckMsg.innerHTML="<font color=\"red\">6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)</font>";
                pwMsgFlg.value = "1";
                pwtxt.value = "";
                pwCfn.value = "";
                pwtxt.focus();
                return false;
            }

            //4.숫자만 존재하는지 체크한다.
            var result_pwd_N = regEx_pwd_N.exec(pwtxt.value);
            if(!result_pwd_N)
            {
                pwdCheckMsg.innerHTML="<font color=\"red\">6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)</font>";
                pwMsgFlg.value = "1";
                pwtxt.value = "";
                pwCfn.value = "";
                pwtxt.focus();
                return false;
            }           
        }
        return true ;
    }
    else
    {
        return false;
    }
}

function cef1PopUp(obj) {

    var frm = $("#mbrEntForm")[0];
    
    if(frm.completeFlg.value == "1"){
        alert("이미 인증처리 되었습니다.");
        return ;
    }
        

    
    $.ajax({
       type:'POST',
       url:'/mbr/mbrCertPopLvl1.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#mbrCertPopUp').html(html);
           insertCef1Popup(obj);
       }
    });

}

function insertCef1Popup(id){

    var html = document.getElementById("mbrCertPopUp").innerHTML;
    document.getElementById("mbrCertPopUp").innerHTML = "";
            
    var cef1Popup;
    cef1Popup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대폰인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    cef1Popup.openPopup(html);
    
}


function cef2PopUp(closeObj,obj) {
  //function cef2PopUp(obj) {
      var closeCef2Popup = new jQuery.Popup().closePopup(closeObj); 
      var frm = $("#mbrEntForm")[0];
      
      var mbrNm = frm.mbrNm.value ;
    
      
      var allTymd = frm.allTymd.value ;
      
      
      var moblieComFlg = frm.mobileComFlg.value;
     
      
      var hpNo = frm.hpNo.value ;
   
      

      $.ajax({
         type:'POST',
         url:'/mbr/mbrCertPopLvl2.do' ,
         data:'mbrNm='+mbrNm+'&allTymd='+ allTymd + '&moblieComFlg='+ moblieComFlg + '&hpNo=' + hpNo,
         dataType:'html',
         cache:false,
         error:function(){
            alert("화면을 가져오지 못하였습니다."); 
         },
         success:function ( html, status ){
             
             $('#mbrCertPopUp2').html(html);
             insertCef2Popup(obj);
         }
      });

  }

  function insertCef2Popup(id){

      var html = document.getElementById("mbrCertPopUp2").innerHTML;
      document.getElementById("mbrCertPopUp2").innerHTML = "";
      
      var cef2Popup;
      cef2Popup = new jQuery.Popup({
          // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
          popupId : id,
          //팝업에 들어갈 title을 지정한다.
          popupTitle : "본인/휴대폰 인증",
          // 팝업의 넓이를 지정한다. 기본은 500px
          width: 750,
          
          // 팝업의 움직일지 여부를 지정한다.
          popupMove: true,
          // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
          popupBackground : false,
          // 팝업에 중간에 들어갈 html
          popupHtml : html
              });

      cef2Popup.openPopup(html);
     
  }
  
  
  function cef3PopUp(closeObj,obj) {
      //function cef2PopUp(obj) {
          var closeCef3Popup = new jQuery.Popup().closePopup(closeObj); 
          var frm = $("#mbrEntForm")[0];
          
          var mbrNm = frm.mbrNm.value ;
        
          
          var allTymd = frm.allTymd.value ;
          
          
          var moblieComFlg = frm.mobileComFlg.value;
         
          
          var hpNo = frm.hpNo.value ;
       
          var authNo = frm.authNo.value ;

          var ResponseSEQ = frm.ResponseSEQ.value;
          
     
          $.ajax({
             type:'POST',
             url:'/mbr/mbrCertPopLvl3.do' ,
             data:'allTymd='+ allTymd + '&authNo='+ authNo +'&ResponseSEQ=' + ResponseSEQ,
             dataType:'html',
             cache:false,
             error:function(){
                alert("화면을 가져오지 못하였습니다."); 
             },
             success:function ( html, status ){
                 
                 $('#mbrCertPopUp3').html(html);
                 insertCef3Popup(obj);
             }
          });

      }

function insertCef3Popup(id){

  var html = document.getElementById("mbrCertPopUp3").innerHTML;
  document.getElementById("mbrCertPopUp3").innerHTML = "";
  
  var cef3Popup;
  cef3Popup = new jQuery.Popup({
      // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
      popupId : id,
      //팝업에 들어갈 title을 지정한다.
      popupTitle : "본인/휴대폰 인증",
      // 팝업의 넓이를 지정한다. 기본은 500px
      width: 750,
      
      // 팝업의 움직일지 여부를 지정한다.
      popupMove: true,
      // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
      popupBackground : false,
      // 팝업에 중간에 들어갈 html
      popupHtml : html
          });

  cef3Popup.openPopup(html);
 
}



/*가입신청을 한다*/
function mbrEntPtt()
{
    
    var frm = $("#mbrEntForm")[0];
    
    var chkEm = document.getElementById("chkEml");
    var chkSms = document.getElementById("chkSms");
    var cplFlg = frm.completeFlg.value ;    
    var pwtxt  = document.getElementById("pwtxt");
    var selEmlTail = document.getElementById("selEmlTail");
    var mbrEmlPrx = document.getElementById("mbrEmlPrx");
    var mbrEmlTail = document.getElementById("mbrEmlTail");
    
    
    /* 
    if(frm.emailChkFlg.value != "Y")
    {
        alert("Email ID 체크를 하여 주시기 바랍니다.");
        return ;
    }
*/
    if(!emlCheck())
    {
        alert("Email을 체크하여 주십시요") ;
        return ;
    }

    //Email체크 부분을 처리해야한다.
    
    if(selEmlTail.value == ""){
        frm.allmbrEml.value =   mbrEmlPrx.value + "@" + mbrEmlTail.value ;  
    }
    else{
        frm.allmbrEml.value = mbrEmlPrx.value + "@" + selEmlTail.value;
    }
    
    
   if(!emlCheck())
   {
       alert("Email을 체크하여 주십시요") ;
       return ;
   }
    
   if (! pwdCheck()) 
   {
      alert("비밀번호를 체크하여 주십시요") ;
      return ;
   }
       
/* 인증을 생락하기위하여
   if(cplFlg != "1"){
       alert("인증 완료후 가입신청이 진행됩니다.");
       return ;
   }
*/      
    
    //Email 수신여부를 체크한다.
    if(chkEml.checked == true)
    {
       
        frm.emlRcpmYn.value = "Y";
    }
    else
    {
        frm.emlRcpmYn.value = "N";
    }
    //SMS 수신여부를 체크한다.
    if(chkSms.checked == true)
    {
        frm.smsRcpmYn.value = "Y";
    }
    else
    {
        frm.smsRcpmYn.value = "N";
    }

   
   // alert(frm.mbrNm.value);
   // alert(frm.tymd.value);
    //alert(pwtxt.value);
    frm.pwtext.value = pwtxt.value;
    //alert(frm.pwtext.value);
     frm.action="<c:url value='/mbr/mbrEntLast.do'/>";
    
    frm.submit();
    
}

/* 인증 처리되었을 경우 인증처리 판단을 위한  hidden값에 저장하고 메세지 처리를 한다.*/
function CertCompleteMsg()
{

    var certMsg = document.getElementById("certMsg");
    
    var completeFlg = document.getElementById("completeFlg") ;
    
    certMsg.innerHTML="인증이 완료되었습니다.";
    completeFlg.value = "1";
 

}



function cancelAction() {

    var frm = $("#mbrEntForm")[0];
     frm.action="<c:url value='/mbr/indexView.do'/>";
    
    frm.submit();
}

</script>
<body>
<form id="mbrEntForm" name="mbrEntForm" method="post">
<input type="hidden" name="allmbrEml" id="allmbrEml" value="">
<input type="hidden" name="emailChkFlg" id="emailChkFlg" value="">
<input type="hidden" name="emlMsgFlg" id="emlMsgFlg" value="0">
<input type="hidden" name="pwMsgFlg" id="pwMsgFlg" value ="0">
<input type="hidden" name="emlRcpmYn" id="emlRcpmYn" value="N">
<input type="hidden" name="smsRcpmYn" id="smsRcpmYn" value="N">
<input type="hidden" name="mbrNm" id="mbrNm" value ="">
<input type="hidden" name="tymd" id="tymd" value="">
<input type="hidden" name="allTymd" id="allTymd" value="">
<input type="hidden" name="mobileComFlg" id="mobileComFlg" value="">
<input type="hidden" name="hpNo" id="hpNo" value="">
<input type="hidden" name="authNo" id="authNo" value="">
<input type="hidden" name="ResponseSEQ" id="ResponseSEQ" value="${mbrInfoVO.responseSEQ}">
<input type="hidden" name="completeFlg" id="completeFlg" value=""> <!-- 인증완료여부 : "1" 인증완료 -->
<input type="hidden" name="pwtext" id="pwtext" value="">
<input type="hidden" name="mbrSex" id="mbrSex" value="">

<%@ include file="/WEB-INF/jsp/com/include/mbr/loginMbr.jspf"%>
<div id="wrapMand" class="non-subnavigation02">



 
<%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>
<hr />
<%@ include file="/WEB-INF/jsp/com/include/sub_header_global02.jspf" %>
<hr />



    <div id="container">
        <div id="subtitle-area"><div class="subtitle-area-inner">
            <%@ include file="/WEB-INF/jsp/com/include/location.jspf" %>
        </div></div>
        <div id="article">
            <p><img src="/images/global_menu/img_join_process02.gif" alt="회원정보 입력" /></p>
            <h4 class="subsection in-contents"><img src="/images/title/h4_global_menu02_02.gif" alt="가입 필수정보" /></h4>
            <p><img src="/images/title/h4_global_menu02_02_desc.gif" alt="회원님의 이메일 주소 및 휴대폰 인증만으로 간단하게 현대자동차 홈페이지 회원가입이 이루어지며, 현대자동차의 유용한 정보수신과 함께 편리한 홈페이지 이용을 도와드립니다." /></p>
            <div class="boardwrite-wrap02 subsection02">
                <table summary="이메일 아이디, 비밀번호입력, 비밀번호 확인, 본인/휴대폰인증, 정보수신동의">
                <caption>가입필수정보 작성</caption>
                <colgroup>
                    <col width="14%" />
                    <col width="15%" />
                    <col width="14%" />
                    <col width="15%" />
                    <col />
                </colgroup>
                <tbody>
                <tr>
                    <th scope="row"><img src="/images/global_menu/txt_global_menu02_02_01.gif" alt="이메일 아이디" /></th>
                    <td colspan="3">
                        <input type="text" class="txt" style="width:104px;"  name="mbrEmlPrx" id="mbrEmlPrx" onchange="emlCheck()" onclick="emlMsgCheck()"/>
                        @
                        <input type="text" class="txt" style="width:104px;" name="mbrEmlTail" id="mbrEmlTail" onchange="emlCheck()" onclick="emlMsgCheck()"/>
                        <select  style="width:137px;" name="selEmlTail"  id="selEmlTail" onchange="svrcomChg()">
                            <option value="" >직접입력</option>
                            <option value="naver.com">naver.com</option>
                            <option value="hanmail.net">hanmail.net</option>
                            <option value="nate.com">nate.com</option>
                            <option value="yahoo.co.kr">yahoo.co.kr</option>
                            <option value="Yahoo.com">Yahoo.com</option>
                            <option value="gmail.com">gmail.com</option>
                            <option value="chol.com">chol.com</option>
                            <option value="dreamwiz.com">dreamwiz.com</option>
                            <option value="empal.com">empal.com</option>
                            <option value="korea.com">korea.com</option>
                            <option value="hotmail.com">hotmail.com</option>
                        </select>
                    </td>
                    <td class="tip-txt" id="emlMsg" name="emlMsg">현대자동차 홈페이지에서 사용 가능한 이메일 아이디를 입력하여 주세요.</td>
                </tr>
                <tr>
                    <th scope="row"><img src="/images/global_menu/txt_global_menu02_02_02.gif" alt="비밀번호 입력" /></th>
                    <td>
                        <input type="password" class="txt" id="pwtxt" name="pwtxt" style="width:104px;" maxlength="15" onchange="pwdCheck()"   onClick="pwdMsgCheck()"/>
                    </td>
                    <th scope="row"><img src="/images/global_menu/txt_global_menu02_02_03.gif" alt="비밀번호 확인" /></th>
                    <td>
                        <input type="password" class="txt" id="pwCfn" name="pwCfn" style="width:104px;" maxlength="15" onchange="pwdCheck()" onClick="pwdMsgCheck()"/>
                    </td>
                    <td class="tip-txt" id="pwMsg" name="pwMsg"> 6자리 이상 영문+숫자 혼용하여 입력하여 주세요.(특수문자 제외)</td>
                </tr>
                <tr>
                    <th scope="row"><img src="/images/global_menu/txt_global_menu02_02_04.gif" alt="본인/휴대폰인증" /></th>
                    <td colspan="3">
                        <a href="javascript:cef1PopUp('cef1');"><img src="/images/common/button/btn_certification.gif" alt="인증받기" /></a>
                    </td>
                    <td class="tip-txt" id="certMsg" name="certMsg">이메일 아이디 / 비밀번호 분실 시 활용 됩니다.</td>
                </tr>
                <tr>
                    <th scope="row"><img src="/images/global_menu/txt_global_menu02_02_05.gif" alt="정보수신동의" /></th>
                    <td colspan="3">
                        <span class="check-area">
                            <input type="checkbox" class="check" id="chkEml" name="chkEml" />
                            <label for="">이메일 수신</label>
                            <input type="checkbox" class="check space" id="chkSms" name="chkSms" />
                            <label for="">SMS 수신</label>
                        </span>
                    </td>
                    <td class="tip-txt">현대자동차에서 제공하는 유용한 정보를 수신할 수 있습니다.</td>
                </tr>
                </tbody>
                </table>
            </div>
            <div class="btnwrap">
                <a href="javascript:mbrEntPtt();"><img src="/images/common/button/btn_join_application.gif" alt="회원가입신청" /></a>
                <a href="javascript:cancelAction();"><img src="/images/common/button/btn_cancel.gif" alt="취소" /></a>
            </div>
        </div>
    </div>
    <hr />
       </div>
   </form>
  
    <div id="mbrCertPopUp" style="display:none"></div>    
    <div id="mbrCertPopUp2" style="display:none"></div>  
    <div id="mbrCertPopUp3" style="display:none"></div>  
    <%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>